<template>
	<view>
		<view class="top_box">
			<view class="avatar_box">
				<u-avatar :src="info.avatar" size="140"></u-avatar>
			</view>
			<view class="name">
				{{info.nickname}}
			</view>
		</view>
		<view class="dingdanBox">
			<view class="ddTop">
				<text class="ddtop_left">我的订单</text>
				<label style="float: right;">
					<u-icon :custom-style="Iconcss" name="arrow-right" style="margin-left: 20rpx;" size="14" color="#808080"></u-icon>
				</label>
				<text class="ddtop_right" @click="godingdan(0)">
					查看全部订单
				</text>
			</view>
			<view class="topbtn_box">
		<!-- 		<view class="topbtn" @click="godingdan(1)">
					<view class="topbtn_img">
						<image src="../../static/fel/dfk.png" mode="scaleToFill"></image>
					</view>
					<view class="topbtn_txt">
						待付款
					</view>
				</view> -->
				<view class="topbtn" @click="godingdan(1)">
					<view class="topbtn_img">
						<image src="../../static/fel/dfh.png" mode="scaleToFill"></image>
					</view>
					<view class="topbtn_txt">
						待发货
					</view>
				</view>
				<view class="topbtn" @click="godingdan(2)">
					<view class="topbtn_img">
						<image src="../../static/fel/dsh.png" mode="scaleToFill"></image>
					</view>
					<view class="topbtn_txt">
						待收货
					</view>
				</view>
			</view>
		</view>
		<view class="btnlist">
			<view class="btnlist_item" @click="goinfo(0)">
				<image src="../../static/fel/grzl.png" mode="scaleToFill"></image>
				<text class="btnlist_name">个人资料</text>
				<u-icon class="btnlist_right" name="arrow-right" color="#808080" size="28"></u-icon>
			</view>
		<!-- 	<view class="btnlist_item" @click="goinfo(1)">
				<image src="../../static/fel/shdz.png" mode="scaleToFill"></image>
				<text class="btnlist_name">收货地址</text>
				<u-icon class="btnlist_right" name="arrow-right" color="#808080" size="28"></u-icon>
			</view> -->
			<view class="btnlist_item" @click="goinfo(2)">
				<image src="../../static/fel/yhq.png" mode="scaleToFill"></image>
				<text class="btnlist_name">优惠券</text>
				<u-icon class="btnlist_right" name="arrow-right" color="#808080" size="28"></u-icon>
			</view>
		</view>
		<view class="loginbtnBox" v-if="!login">
			<button class="loginbtn" type="default" open-type="getUserInfo" @getuserinfo="getuserinfo"></button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					avatar: "",
					nickname: "请登录"
				},
				Iconcss: {
					position: "relative",
					top: "-6rpx"
				},
				login: false,
				code: null,
				first: false,
			};
		},
		onLoad() {
			// uni.showShareMenu()
			uni.getStorage({
				key: 'userinfo',
				success: (res) => {
					this.info = res.data
					this.login = true
					console.log(this.info);

				},
			})
			this.first = true
		},
		onShow() {
			if (this.first) {
				uni.getStorage({
					key: 'userinfo',
					success: (res) => {
						this.info = res.data
						this.login = true
					},
				})
			}

		},
		methods: {
			getuserinfo(e) {
				console.log(e);
				var val = e.detail.userInfo
				uni.login({
					provider: 'weixin',
					success: (msg) => {
						this.code = msg.code
						uni.request({
							url: this.$AJAX_URL + 'login/login',
							method: 'POST',
							data: {
								code: this.code,
								nickName: val.nickName,
								avatar: val.avatarUrl,
								sex: val.gender,
								language: val.language,
								province: val.province,
								country: val.country,
								city: val.city
							},
							success: (res) => {
								console.log(res);
								this.info = res.data.data
								this.login = true;
								uni.setStorage({
									key: 'userinfo',
									data: res.data.data
								})
							},
							fail: (err) => {
								this.$u.toast(err.errMsg)
							}
						})
					}
				})

			},
			godingdan(val) {
				uni.navigateTo({
					url: '../wodedingdan/wodedingdan?val=' + val
				})
			},
			goinfo(val) {
				switch (val) {
					case 0:
						uni.navigateTo({
							url: '../bianjiziliao/bianjiziliao'
						})
						break;
					case 1:
						uni.navigateTo({
							url: '../wodedizhi/wodedizhi'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '../youhuiquan/youhuiquan'
						})
						break;
					default:
						break;
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.top_box {
		width: 100%;
		height: 360rpx;
		background-color: #4D4D4D;

		.avatar_box {
			border: 1px solid #FFFFFF;
			width: 146rpx;
			height: 146rpx;
			border-radius: 50%;
			// padding: 2rpx;
			margin: 0 auto;
		}

		.name {
			text-align: center;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-top: 20rpx;
		}
	}

	.dingdanBox {
		width: 710rpx;
		height: 240rpx;
		position: relative;
		background-color: #FFFFFF;
		top: -110rpx;
		border-radius: 20rpx;
		margin: 0 auto;

		.ddTop {
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1px solid #E6E6E6;
			width: 640rpx;
			margin: 0 auto;

			.ddtop_left {
				color: #000000;
				font-size: 34rpx;
			}

			.ddtop_right {
				float: right;
				color: #808080;
				font-size: 24rpx;
			}
		}

		.topbtn_box {
			width: 590rpx;
			margin: 0 auto;
			// background-color: red;
			height: 100rpx;
			margin-top: 16rpx;
			display: flex;
			justify-content: space-around;

			.topbtn {
				image {
					width: 80rpx;
					height: 80rpx;
				}

				.topbtn_txt {
					font-size: 22rpx;
					color: #808080;
					text-align: center;
					position: relative;
					top: -20rpx;
				}
			}
		}
	}

	.btnlist {
		background: #FFFFFF;
		position: relative;
		top: -100rpx;

		.btnlist_item {
			height: 88rpx;
			overflow: hidden;
			line-height: 88rpx;
			display: flex;
			position: relative;

			image {
				width: 62rpx;
				height: 62rpx;
				margin-top: 13rpx;
				margin-left: 10rpx;
			}

			.btnlist_name {
				font-size: 28rpx;
				color: #4D4D4D;
			}

			.btnlist_right {
				position: absolute;
				right: 30rpx;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		}

	}

	.loginbtnBox {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;

		.loginbtn {
			width: 100%;
			height: 100%;
			opacity: 0;
		}
	}
</style>
